<template>
  <fks-dialog
    :append-to-body="true"
    :visible.sync="detailDialogVisible"
    width="480px"
    destroy-on-close
    @close="close"
    @open="openDialog"
    @keyup.native.enter="submitdetail"
  >
    <div slot="title">
      <i
        v-if="title == LANG.ADD"
        class="fks-icon-plus"
        :style="{ color: theme }"
      />
      <i
        v-if="title == LANG.EDIT"
        class="fks-icon-edit"
        :style="{ color: theme }"
      />
      {{ title }}
    </div>
    <fks-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="84px"
      label-position="left"
    >
      <fks-form-item :span="24" lead :label="LANG.CODE" prop="code">
        <fks-input v-model="form.code" maxlength="50" show-word-limit />
      </fks-form-item>
      <fks-form-item
        v-for="item in initLang"
        :key="item.key"
        :span="24"
        :label="item.label"
        :prop="item.label"
      >
        <fks-input v-model="form[item.key]" maxlength="500" show-word-limit />
      </fks-form-item>

      <div v-if="show">
        <fks-form-item
          v-for="item in allLanguages"
          :key="item.key"
          :span="24"
          :label="item.label"
          :prop="item.label"
        >
          <fks-input v-model="form[item.key]" maxlength="500" show-word-limit />
        </fks-form-item>
      </div>
      <fks-form-item v-if="showButton" :span="24">
        <fks-button
          v-if="show == false"
          style="width: 100%"
          icon="fks-icon-arrow-down"
          @click="showLang()"
        >
          {{ LANG.SHOW_ALL }}
        </fks-button>
        <fks-button
          v-if="show == true"
          style="width: 100%"
          icon="fks-icon-arrow-up"
          @click="showLang()"
        >
          {{ LANG.HIDE_ALL }}
        </fks-button>
      </fks-form-item>
    </fks-form>
    <div class="btns">
      <section>
        <fks-button
          v-permission="['i18n:item:save']"
          type="primary"
          style="margin-top: 8px"
          icon="fks-icon-check"
          @click="submitdetail"
        >
          {{ LANG.SAVE }}
        </fks-button>
      </section>
    </div>
  </fks-dialog>
</template>

<script>
import { GET_LANG } from '@/store/Action/actionTypes'
import { ENUM } from '@/store/State/stateTypes'
import * as types from '@/store/Getter/getterTypes.js'
import { addLangDetail, getAllDetail, getCodeDetail } from '../../api/common'
import Sortable from 'sortablejs'
export default {
  name: 'DragTable',
  props: {
    data: {
      default() {
        return {
          code: ''
        }
      }
    },
    visible: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'add'
    }
  },
  data() {
    return {
      showButton: true,
      show: false,
      form: Object.assign({}, this.data),
      searchBarH: 59,
      dicName: '',
      allLanguages: [],
      copyForm: {},
      initLang: [
        { label: '简体中文', key: 'zh-CN' },
        { label: 'English', key: 'en' }
      ],
      openLang: [],
      tableData: [],
      dicKey: '',
      list: null,
      total: null,
      loading: false,
      sortable: null,
      oldList: [],
      newList: [],
      langId: {},
      mark: {}
    }
  },
  computed: {
    title() {
      switch (this.type) {
        case 'add':
          return this.LANG.ADD
        case 'view':
          return this.LANG.VIEW
        default:
          return this.LANG.EDIT
      }
    },
    theme() {
      return this.$store.getters[types.THEME]
    },
    languages() {
      return this.$store.state[ENUM].languages
    },
    detailDialogVisible: {
      get() {
        return this.visible
      },
      set(visible) {
        this.$emit('update:visible', visible)
      }
    },
    rules() {
      return {
        code: [
          {
            required: true,
            message: this.LANG.KEY_NAME_NOT_EMPTY,
            trigger: 'blur'
          }
        ],
        parentId: [
          {
            required: true,
            message: '字典名称不可为空',
            trigger: 'blur'
          }
        ]
      }
    }
  },

  watch: {
    detailDialogVisible(val) {
      if (val) {
        this.form = Object.assign({}, this.data)
        if (this.type == 'edit') {
          let params = {
            id: this.data.parentId,
            code: this.data.code
          }
          getCodeDetail(params)
            .then((res) => {
              if (res.status) {
                if (res.data) {
                  res.data.map((item) => {
                    if (item.id) {
                      this.mark[item.langCode] = {
                        createBy: item.createBy,
                        createDate: item.createDate,
                        sort: item.sort,
                        updateBy: item.updateBy,
                        updateDate: item.updateDate,
                        deleteFlag: item.deleteFlag
                      }
                      this.form[item.langCode] = item.content
                      this.langId[item.langCode] = item.id
                    }
                  })
                }
                this.form = Object.assign({}, this.form)
              }
            })
            .catch(() => {})
        }
      }
    }
  },
  mounted() {},
  created() {},
  methods: {
    showLang() {
      this.show = !this.show
    },
    openDialog() {
      this.getLanguages()
    },
    close() {
      this.langId = {}
      this.$refs.form.clearValidate()
      this.form = {}
      this.show = false
      this.detailDialogVisible = false
      this.allLanguages = []
      this.arr = []
    },
    getLanguages() {
      this.languages.forEach((item) => {
        if (item.code != 'en' && item.code != 'zh-CN')
          this.allLanguages.push({ key: item.code, label: item.name })
      })
      if (this.allLanguages.length == 0) this.showButton = false
    },
    ifLang(key) {
      let w = false
      this.languages.forEach((item) => {
        if (item.code == key) {
          w = true
        }
      })
      return w
    },
    submitdetail() {
      let params = []
      this.copyForm = JSON.parse(JSON.stringify(this.form))

      let temp = {
        code: this.copyForm.code,
        parentId: this.copyForm.parentId
      }
      for (var key in this.copyForm) {
        if (this.ifLang(key)) {
          params.push(
            Object.assign({}, this.langId[key] ? this.mark[key] : {}, temp, {
              langCode: key,
              content: this.copyForm[key],
              id: this.langId[key] ? this.langId[key] : ''
            })
          )
        }
      }
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (params.length == 0) {
            this.$message.error(this.LANG.NONE_ADD)
            this.detailDialogVisible = false
          } else {
            addLangDetail(params)
              .then((res) => {
                if (res.status) {
                  this.$message.success(this.LANG.SAVE_SUCCESS)
                  this.langId = {}
                  this.show = false
                  this.detailDialogVisible = false
                  this.$store.dispatch(GET_LANG, this.$lang)
                  this.$parent.refreshTable()
                }
              })
              .catch(() => {})
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .fks-transfer-panel {
  margin-left: 24px;
}

::v-deep .fks-icon-check {
  margin-right: 4px;
}

.btns {
  height: 25px;

  section {
    float: right;
  }
}
</style>
